<!DOCTYPE html>
<html>

<head>
    <title>北京站网格化系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/validform.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/js/jquery-treegrid-master/jquery.treegrid.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../lib/css/common/style.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/themes/flat-blue.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/newstyle.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/zc-common.css">
    
</head>
<body class="flat-blue">
    <div class="app-container expanded">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid app-header">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle fa-rotate-90">
                            <i class="fa fa-bars icon"></i>
                        </button>
                        <top-nav></top-nav>
                    </div>
                    <right-info></right-info>
                </div>
            </nav>
            <div class="side-menu-wrap">
                <side-menu></side-menu>
            </div>
            <!-- Main Content -->
            <div class="container-fluid">
                <div class="side-body padding-top">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="elm-wrap">
                                    <button type="button" onclick="editing(this,'devAddRoot')" class="btn btn-info">添加部门</button>
                                    <button type="button" class="btn btn-default">批量导入</button>
                                </div>
                                <div class="elm-wrap">
                                    <table id="tb" >
                                            
                                    </table>     
                                </div> 
                            </div>
                             
                        </div>   
                    </div>
                </div>
            </div> 
        </div>
        <footer class="app-footer">
            <div class="wrapper">
                
            </div>
        </footer>
        <div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">添加子部门</h4>
                    </div>
                    <div class="modal-body">
                        <div class="" style="padding:5px;">
                            <form class="form-horizontal depform ss_form">
                                    <div class="form-group">
                                        <label for="" class="col-sm-2 control-label">上级部门：</label>
                                        <div class="col-sm-10">
                                            <p class="form-control-static pdep">北京铁路局北京火车站</p>
                                            <input type="hidden" value="" class="pid" name="pid">
                                            <input type="hidden" value="" class="did" name="did">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="" class="col-sm-2 control-label">部门名称：</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="depname" class="form-control depname" id="" placeholder="请输入部门名称" datatype="*" errormsg="部门名称错误" nullmsg="部门名称不能为空" >
                                            <span class='Validform_checktip' />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="" class="col-sm-2 control-label">车间类型：</label>
                                        <div class="col-sm-10">
                                            <select class="form-control deptype" name="deptype">
                                                <option value="12">机关</option>
                                                <option value="1">客运车间</option>
                                                <option value="2">售票车间</option>
                                                <option value="3">运转车间</option>
                                                <option value="4">房修车间</option>
                                                <option value="5">信息化车间</option>
                                                <option value="6">保洁车间</option>
                                                <option value="7">后勤车间</option>
                                                <option value="8">商服车间</option>
                                                <option value="9">行装车间</option>
                                                <option value="10">上水车间</option>
                                                <option value="11">其他</option>
                                            </select>  
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="" class="col-sm-2 control-label">部门描述：</label>
                                        <div class="col-sm-10">
                                                <textarea class="form-control desc" rows="3" placeholder="不能超过100个字"></textarea>
                                        </div>
                                    </div>
                                </form>
                        </div>    
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-info" onclick="updated()">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modalDel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel2">删除部门</h4>
                        <input type="hidden" value="" class="did" name="did">
                    </div>
                    <div class="modal-body">
                        确定删除该部门么？如果该部门有子部门的话将一并删除哦！
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-info del">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="modalTips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel3">提示</h4>
                    </div>
                    <div class="modal-body">
                        温馨提示
                    </div>
                </div>
            </div>
        </div>
    <div>
<!-- Javascript Libs -->
<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
<script type="text/javascript" src="../lib/js/common/base.js"></script>
<script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../lib/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
<script type="text/javascript" src="../lib/js/validform.js"></script>
<script type="text/javascript" src="../lib/js/jquery-treegrid-master/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery-treegrid-master/jquery.treegrid.bootstrap3.js"></script>
<script type="text/javascript" src="../lib/js/jquery-treegrid-master/jquery.treegrid.extension.js"></script>
<script type="text/javascript" src="../lib/js/vue.js"></script>
<!-- <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
<script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
<script type="text/javascript" src="../lib/js/ace/theme-github.js"></script> -->
<!-- Javascript -->
<script type="text/javascript" src="../lib/js/common/app.js"></script>

<script type="text/javascript">
    // storageControl.islogined()
    navData.accNav1 = 'organization'
    navData.nav1Name = '组织管理'
    navData.accNav2 = 'organization-base'
    navData.accNav3 = '0'
    var navVue = new Vue({
        el:'.side-menu-wrap' 
    })
    var navTopVue = new Vue({
        el:'.app-header' 
    })
    //initNav()
    function initData(){
        $('#tb').treegridData({
            id: 'department_id',
            parentColumn: 'p_id',
            textColumn:'department_name',
            type: "POST", //请求数据的ajax类型
            url: serverUrl.base+serverUrl.department+'department_list',   //请求数据的ajax的urlhttp://119.23.232.192:8081/Organization/../lib/json/base2.json
            ajaxParams: {
                _:Math.random()
            }, //请求数据的ajax的data属性
            expandColumn: null,//在哪一列上面显示展开按钮
            striped: false,   //是否各行渐变色
            bordered: false,  //是否显示边框
            //expandAll: false,  //是否全部展开
            columns: [
                {
                    title: '机构名称',
                    field: 'department_name',
                    w:'80%',
                    exField:'department_desc'
                },
                {
                    title:'操作',
                    w:'20%',
                    field:'',
                    html:'<a class="" onclick="editing(this,\'depEdit\')" href="javascript:void(0)">编辑</a> | <a onclick="editing(this,\'depAdd\')" href="javascript:void(0)">添加子部门</a> | <a class="" onclick="deling(this)" href="javascript:void(0)">删除部门</a>'
                }
            ],
            renderComplete:function(){
                
                $('body').loading('close')
            }
        });
    }
    initData()
    function editing(evt,type){
        var _type = type
        var _this = evt || window.event.target
                        
        var $modal = $("#modalEdit")
        var $title =  $modal.find('.modal-title')
        var $pDep =  $modal.find('.pdep')
        var $pid =  $modal.find('.pid')
        var $did =  $modal.find('.did')
        var $depName =  $modal.find('.depname')
        var $desc =  $modal.find('.desc')
        var $depTypeWrap =  $modal.find('.deptype')
        var _parenttr = $(_this).parents('tr')
        var $pdata = _type != "devAddRoot"?_parenttr.treegridData('getParentNodeData'):{}
        var $data = _type != "devAddRoot"?_parenttr.treegridData('getNodeData'):{workshop_id:1}

        $pDep.text('北京铁路局北京火车站')

        if(_type == "depAdd" || _type == "devAddRoot"){
            if(_type == "depAdd"){
                $title.text('添加子部门')
                $pid.val($data.department_id);
            }else{
                $title.text('添加部门')
                $pid.val(0);
            }
            if($data.p_id){
                $pDep.text($data.department_name)
            }
            $did.val('')
            $depTypeWrap.find('option[value=\''+$data.workshop_id+'\']').prop('selected',true)
            $depName.val('');
            $desc.val('');
        }else if(_type == "depEdit"){
            $title.text('编辑部门')
            if($data.p_id){
                $pDep.text($pdata.department_name)
            }
            $depTypeWrap.find('option[value=\''+$data.workshop_id+'\']').prop('selected',true);
            $depName.val($data.department_name);
            $desc.val($data.department_desc);
            $pid.val($data.p_id);
            $did.val($data.department_id)
        }
        
        $("#modalEdit").modal()
    }
    function deling(evt){

        var _this = evt || window.event.target

        var _parenttr = $(_this).parents('tr')
        var $dataid = _parenttr.treegridData('getNodeData').department_id
        //console.log($(event.target).parents('tr'))
        $("#modalDel").modal()
        var $modal = $("#modalDel")
        $modal.find('.del').off('click').on('click',function(){
            updatedDel($dataid)
        })
    }
    function updated(){        
        if(!myValidform.check()){
            return false
        }
        var $modal = $("#modalEdit")
        var _updata={
            department_id:$modal.find('.did').val(),
            p_id:$modal.find('.pid').val(),
            department_name:$modal.find('.depname').val(),
            department_desc:$modal.find('.desc').val(),
            workshop_id:$modal.find('.deptype').val()
        }
        $('.side-body').loading('open')
        $.ajax({
            url:serverUrl.base+serverUrl.department+'up_department',
            type:"post",
            data:_updata,
            dataType:"json",
            success:function(res){
                //console.log(res)
                
                if(res.code == '0'){
                    initData()
                    $("#modalTips").find('.modal-title').text('成功')
                }else if(res.code == '2'){
                    $("#modalTips").find('.modal-title').text('出现问题') 
                }
                $("#modalTips").find('.modal-body').text(res.info)
                setTimeout(function(){
                    $("#modalTips").modal()    
                },500)
            },
            complete:function(res){
                $('.side-body').loading('close')
                $("#modalEdit").modal('hide')                        
            }
        })
        
    }
    function updatedDel(id){
        var _updata={
            department_id:id
        }
        $.ajax({
        url:serverUrl.base+serverUrl.department+'del_department',
            type:"post",
            data:_updata,
            dataType:"json",
            success:function(res){
                initData()
                setTimeout(function(){
                    var _txt = '成功'
                    if(res.code == '0'){

                    }else if(res.code == '2'){
                        _txt = '失败'
                    }
                    $("#modalTips").find('.modal-title').text(_txt)
                    $("#modalTips").find('.modal-body').text(res.info)
                    $("#modalTips").modal()    
                },500)
            },
            complete:function(res){
                $("#modalDel").modal('hide')
            }
        })
    }
    var myValidform = $(".ss_form").Validform({
        tiptype:3,
        datatype:{
            putso:function(gets,obj,curform,regxp){
                /*参数gets是获取到的表单元素值，
				  obj为当前表单元素，
				  curform为当前验证的表单，
				  regxp为内置的一些正则表达式的引用。*/
                var _checkpwrap = obj.parents('.checkpwrap')
                var _type = _checkpwrap.find('.checkp').val()
                var _userid = _checkpwrap.find('.userid').val()
                var _post = _checkpwrap.find('.post').val()
                var reg1=regxp["*"],
					reg2=/[\d]{7}/,
					mobile=curform.find(".mobile");
                if(obj){
                    if(_type == '1'){
                        //人
                        //console.log(_userid)
                        if(reg1.test(_userid)){return true;}
                    }else if(_type == '3'){
                        //岗位
                        if(reg1.test(_post)){return true;}
                    }
                }
                return false;
            },
            ztreegroup:function(gets,obj,curform,regxp){
                console.log(gets)
                if(gets == ''){
                    return false
                }else{
                }
            },
            select2:function(gets,obj,curform,regxp){
                if(gets.length ==0){
                    obj.siblings('.select2').find('.select2-selection').css('borderColor','red')
                    return false
                }else{
                    obj.siblings('.select2').find('.select2-selection').css('borderColor','#ccc')
                }
            }
        }
    });
</script>
</body>

</html>
